<template>
<el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column
      prop="id"
      label="Id">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名">
    </el-table-column>
   <!-- <el-table-column
      prop="address"
      label="地址">
    </el-table-column> -->
  </el-table>
<!-- <div>{{tableData}}</div> -->
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
	
	// 引入axios



  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: []
      }  
	  },
	  //vue生命周期中的钩子函数
	  created(){
		  // let  _that=this;
		  //给tabledata赋值
		  // this.tableData=[{
    //       date: '2016-05-02',
    //       name: '王小虎',
    //       address: '上海市普陀区金沙江路 1518 弄',
    //     }, {
    //       date: '2016-05-04',
    //       name: '王小虎',
    //       address: '上海市普陀区金沙江路 1518 弄'
    //     }, {
    //       date: '2016-05-01',
    //       name: '王小虎',
    //       address: '上海市普陀区金沙江路 1518 弄',
    //     }, {
    //       date: '2016-05-03',
    //       name: '王小虎',
    //       address: '上海市普陀区金沙江路 1518 弄'
    //     }]
	
	
	//发出axios请求，把后端响应的结果给tableData
	this.$axios.get('http://localhost:8080/query')
	  .then((response)=> {
		  //访问成功的回调，response代表的是后端响应的数据结果
	    console.log(response.data);
		
		let laydata=response.data;
		
		// let dataList=laydata.data;
		
		// console.log(dataList);
		//dataList赋值给tabledData
		this.tableData=laydata;
		
	  })
	  .catch(function (error) {
		  //error 访问失败
	    console.log(error);
	  });
    }
  }
  // var ddd=function(){
	  
  // }
  
  // var ddd=()=>{
	  
  // }
  //普通函数和箭头函数this的指向问题 箭头函数就在then(()=>{}),this指向vue对象
</script>